<ng-template #extra>
    <button nz-button nzType="primary" nzSize="small" [nzLoading]="nzLoading" (click)="submit()">
        <span nz-icon nzType="plus"></span>
        {{nzTitle}}</button>
    
  </ng-template>
  
  <nz-card nzTitle="批量创建网关" [nzExtra]="extra">
    <form nz-form [formGroup]="group" (ngSubmit)="submit()">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired
          >名称</nz-form-label
        >
        <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
          <input nz-input formControlName="name" />
          <ng-template #nameErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')"
              >请输入名称!</ng-container
            >
          </ng-template>
        </nz-form-control>
      </nz-form-item>
  
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username"
          >用户名</nz-form-label
        >
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="username" />
        </nz-form-control>
      </nz-form-item>
  
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password"  
          >密码</nz-form-label
        >
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="password" type="password"/>
        </nz-form-control>
      </nz-form-item>
  
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="desc">描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="desc" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="amount">创建数量</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="">
            <nz-input-number formControlName="amount" [nzMin]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item>
      <!-- <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="disabled"
          >禁用</nz-form-label
        >
  
        <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback>
          <nz-switch 
            name="disabled"
            formControlName="disabled"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item> -->
    </form>
  </nz-card>
  <div *ngIf="datum&&datum.length" style="text-align: right;">
    <button nz-button nzType="primary" nzSize="large" (click)="handleExport()">
        <i nz-icon nzType="cloud-download"></i>
        导出
    </button>
</div>
<nz-table *ngIf="datum&&datum.length" #basicTable [nzData]="datum" [nzShowPagination]="false"
    [nzFrontPagination]="false">
    <thead>
        <tr>
            <th nzColumnKey="id" [nzSortFn]="true">ID</th>
            <th nzColumnKey="name">名称</th>
            <th nzColumnKey="username">用户名</th>
            <th nzColumnKey="password" >密码</th>
            <th nzColumnKey="desc">说明</th>
            <th nzColumnKey="disabled">启用</th>
            <th nzColumnKey="created" [nzSortFn]="true">日期</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of basicTable.data; let i = index">
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.username}}</td>
            <td>{{data.password}}</td>
            <td>{{data.desc}}</td>
            <td>{{data.disabled||false}}</td>
            <td>{{data.created | date}}</td>
        </tr>
    </tbody>
</nz-table>
